<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		

		<title>证明材料信</title>
		<style lang="">
			 body{
            background-color: #fff;
        }
			.contentBox {
				width: 700px;
				height: 420px;
				border: 1px solid #93918f;
				position: absolute;
				top: 0%;
				left: 0;
				bottom: 0;
				right: 0;
				margin: 50px auto;
			}

			input {
				border: none;
				border-bottom: 1px solid #000;
				background-color: transparent;
			}

			aside {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 5%;
				font-size: 25px;
				font-weight: 500 !important;
			}

			.container {
				display: flex;
				justify-content: left;
				align-items: left;
				flex-direction: column;
				line-height: 10px;
				margin-left: 4%;
			}

			.footer {
				display: flex;
				justify-content: right;
				align-items: center;
				flex-direction: column;
				margin-left: 40%;
				line-height: 10px;
			}

			.btn {
				position: relative;
				top: 150%;
				bottom: 5%;
				right: 0;
				left: 48%;
				margin: auto auto;
				width: 50px;
			}

			.input-box {
				width: 60px;
				height: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				/* background-color: red; */
			}

			/* .input-box p {
            float: left;
        } */

			.input-box .inputbox2 {
				width: 40%;
				height: 80%;
				border-bottom: 1px solid #000;
				background-color: transparent;
				float: left;
			}

			p {
				display: block;
				font-size: 16px;
			}

			.idcard {
				width: 160px !important;
			}
			.idcard2 {
				width: 240px !important;
			}

			.row {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 20px;
				margin-top: 10px;
				/* background-color: red; */
			}

			.username {
				width: 95px !important;
			}

			.four {
				width: 160px !important;
			}

			.five {
				width: 220px !important;
			}

			.muntil {
				width: 535px !important;
			}
			.text {
				letter-spacing: 5px;
			}
			.btn_box {
				margin-left: 40%;
				margin-top: 80px;
			}
			.layui-btn {
				display: inline-block;
				height: 38px;
				line-height: 38px;
				padding: 0 18px;
				background-color: #009688;
				color: #fff;
				white-space: nowrap;
				text-align: center;
				font-size: 14px;
				border: none;
				border-radius: 2px;
				cursor: pointer;
				margin-left: 20px;
			}
			#btnPrint {
				background-color: #2f81ff;
				margin-right: 30px;
			}
			#btnBack {
				background-color: #ff8400;
			}
			.inputbox1 {
				font-size: 25px;
				width: 80px !important;
			}
			.seName {
				width: 40px !important;
			}
			.userName {
				width: 40px !important;
			}
			#ftBox {
				position: absolute;
				top: 200%;
				bottom: 0px;
				right: 0px;
				left: 2%;
			}
			.image {
				position: relative;
			}
			#bg {
				position: absolute;
				top: 10%;
				bottom: 0px;
				right: 5%;
				left: 0px;
				margin: 10px -40px;
			}
		</style>
		<style media="print">
			@page {
				size: auto; /* auto is the initial value */
				margin: 0mm; /* this affects the margin in the printer settings */
			}
		</style>
	</head>

	<body>
		<div id="outBox">
			<div class="image" id="a"></div>
			<div class="contentBox" id="priBox">
				<aside>
					关于
					<input
						type="text"
						autocomplete="off"
						style="height: 40px"
						class="layui-input inputbox1"
						name=""
						readonly
						id="recordname"
					/>
					同志的政审材料
				</aside>
				<div class="container">
					<div class="row">
						<div class="input-box username">
							<input
								type="text"
								autocomplete="off"
								readonly
								class="layui-input inputbox2 seName"
								name=""
								id="recordname2"
							/>
							<p class="">同志，</p>
						</div>
						<div class="input-box">
							<p class="p1">性别</p>
							<input
								type="text"
								readonly
								autocomplete="off"
								class="layui-input inputbox2"
								name=""
								id="sex"
							/>
						</div>
						<div class="input-box idcard2">
							<p class="idNumber">身份证号</p>
							<input
								type="text"
								autocomplete="off"
								readonly
								class="layui-input inputbox2 idcard"
								name=""
								id="idNumber"
							/>
						</div>

						<div class="input-box">
							<p class="p1">系</p>
							<p class="p1">___省</p>
						</div>
						<div class="input-box">
							<p class="p1">___市</p>
						</div>
						<div class="input-box">
							<p class="p1">___人，</p>
						</div>
						<div class="input-box">
							<p class="p1">___族，</p>
						</div>
					</div>
					<div class="row">
						<div class="input-box four">
							<p class="p1">文化程度_____</p>
						</div>
						<div class="input-box four">
							<p class="p1">本人成分_______</p>
						</div>
						<div class="input-box four">
							<p class="p1">，政治面貌_______</p>
						</div>
						<div class="input-box">
							<p class="p1">____年</p>
						</div>
						<div class="input-box five">
							<p class="p1">______月参加工作，</p>
						</div>
					</div>
					<div class="row">
						<div class="input-box firstBox">
							<p class="p1">____年</p>
						</div>
						<div class="input-box">
							<p class="p1">____月</p>
						</div>
						<div class="input-box muntil">
							<p class="p1">在</p>
							<p class="p1">
								__________________________（单位）退休，为我中心管理的退休人员。
							</p>
						</div>
					</div>
					<div class="text">
						<p>
							经审阅其档案：该同志在“文革”期间、一九八九年春夏之交的“政
						</p>
						<p>
							治风波”中无过激行为，没有参与“法轮功”邪教组织的记录，亦无
						</p>
						<p>违法违纪的记录。</p>
						<p>特此证明。</p>
					</div>
				</div>

				<div class="footer">
					<p>济南市历城区王舍人</p>
					<p>街道人力资源社会保障服务中心</p>
					<div class="row">
						<div class="input-box">
							<p class="p1">年</p>
						</div>
						<div class="input-box">
							<p class="p1">月</p>
						</div>
						<div class="input-box">
							<p class="p1">日</p>
						</div>
					</div>
				</div>
				<div
					class="ftBox"
					id="ftBox"
					style="display: none; margin-top: 90px"
				></div>
				<div class="btn_box">
					<div class="layui-btn" id="btnPrint">打印</div>
					<!-- <div class="layui-btn" id="btnBack">返回</div> -->
				</div>
			</div>
		</div>

		<!--js逻辑-->
		<script src="../../../lib/layui/layui.js"></script>
		<script src="../../../plugins/jquery/jquery-2.1.0.js"></script>
		<script src="../../../plugins/jquery/jQuery.print.js"></script>
		<script src="../../../js/print.js"></script>

		<script
			type="text/javascript"
			src="../../../lib/loading/okLoading.js"
		></script>

		<script>
			layui.use(
				[
					'element',
					'table',
					'form',
					'jquery',
					'laydate',
					'okLayer',
					'okUtils',
				],
				function () {
					let table = layui.table
					let form = layui.form
					let laydate = layui.laydate
					let okLayer = layui.okLayer
					let okUtils = layui.okUtils
					let $ = layui.jquery
					okLoading.close($)
					okUtils
						.ajax('../../../data/navs.json', 'get', true)
						.done(function (res) {
							console.log(res)
							var usernameVal = res.data[0].recordname
							console.log(usernameVal)
							var idVal = res.data[0].idnumber
							var textVal = res.data[0].title
							var sexVal = res.data[0].sex
							var addtVal = res.data[0].address
							var txVal = res.data[0].tuixiutime
							var lbVal = res.data[0].leibie

							$('#recordname').val(usernameVal)
							$('#recordname2').val(usernameVal)

							$('#idNumber').val(idVal)
							$('#sex').val(sexVal)
						})
						.fail(function (error) {
							console.log(error)
						})
				}
			)
		</script>
	</body>
</html>
